<template>
  <div ref="listDom" class="item" :class="{ spreadSty: isSpread }" :style="{ '-webkit-line-clamp': line, 'line-height': lineHeight + 'px' }">
    <div class="desc">
      {{ desc }}
      {{ $slots.$props }}
      <slot></slot>
      <span v-show="showBtn" @click="isSpread = !isSpread" :class="[isSpread ? 'packUp' : 'launch']"> {{ isSpread ? '收起' : '更多' }}</span>
    </div>
  </div>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
defineOptions({
  name: 'MOverflow'
})
const showBtn = ref(false)
const isSpread = ref(false)
const listDom = ref()
const props = defineProps({
  desc: {
    type: String,
    default: ''
  },
  line: {
    type: [Number, String],
    default: 1
  },
  lineHeight: {
    type: [Number, String],
    default: 24
  }
})
watch(
  () => props.desc,
  async (newVal) => {
    await nextTick()
    const { clientHeight, scrollHeight } = listDom.value
    showBtn.value = scrollHeight > clientHeight
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
.item {
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  .desc {
    word-break: break-all;
  }
  .launch {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 24px;
    display: block;
    z-index: 10;
    background: linear-gradient(270deg, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
    color: #0980f1;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    cursor: pointer;
  }
  .packUp {
    width: 80px;
    height: 24px;
    opacity: 1;
    color: #0980f1;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    cursor: pointer;
  }
  &.spreadSty {
    -webkit-line-clamp: 999 !important;
  }
}
</style>
